<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}

			/* 大盒子 */
			#addtableone {

				width: 90%;
				/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}

			#header {
				top: 0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}

			#header #left {
				height: 80px;
				line-height: 80px;
				text-indent: 12px;

			}

			#header #right {
				height: 80px;

				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}

			#hr1 {

				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;

			}
		</style>
	</head>
	<body>
		<div id="addtableone">
			<!-- 			<el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark">
			  <div class="block">
			    <span class="demonstration"> 登记表类型</span>
			    <el-cascader
			      v-model="value"
			      :options="options"
			      @change="handleChange"></el-cascader>
			  </div>
			  </div></el-col>
			</el-row> -->

			<el-row id="header">
				<el-col :span="12">
					<div class="grid-content bg-purple" id="left">
						<h3>教材与专著登记管理</h3>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
						<el-button type="primary" @click="fanhui">
							<el-link style="width: 100%;color: white;" href="list.html" target="_self" :underline="false">返回
							</el-link>
						</el-button>
					</div>
				</el-col>
				<hr id="hr1" />
			</el-row>

			<el-row style="padding-left: 40px;">


				<!-- 表单子属性有el-form-item,el-row(多个el-form-item)同级别,可自行删除不需要的-->
				<!-- 短框200px,长框300px,el-form-item width -->
				<!-- 选择框或输入框 label用于显示, value 与 VUE中对应属性绑定 -->
				<!--正则 el-form-item prop="值"  值和rules 中的规则对象绑定-->
				<!--最后的验证函数已经注释可正常提交 ,若想使用查看提交按钮处注释, -->
				<!-- 	刊物级别,和论文类型 使用v-for,其他的是固定的 -->
				<!-- 出版时间和现在时间已经写好可直接使用,onsubmit函数中 -->
				<!--证明材料未设置必须提交,也未绑定table中的值 掌握文件上传后才自行设置-->
				<!--提交后表单信息归零函数未设置,后期自行设置-->
				<el-form v-loading="loading" :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm" name>

					<!--填报人 tianbaoname-->
					<el-form-item label="填报人" style="width: 200px" prop="tianbaoName">
						<el-input v-model="form.tianbaoName" readonly></el-input>
					</el-form-item>

					<!--书籍名称 bookname-->
					<el-row>
						<el-col :span="8">
							<el-form-item label="书籍名称" style="width: 300px;" prop="bookName">
								<el-input v-model="form.bookName"></el-input>
							</el-form-item>
						</el-col>

						<!--出版社 chubanshe-->
						<el-col :span="8">
							<el-form-item label="出版社" style="width: 300px;" prop="chuBanSeh">
								<el-input v-model="form.chuBanSeh"></el-input>
							</el-form-item>
						</el-col>

						<!--authers 作者-->
						<el-col :span="8">
							<el-form-item label="作者" style="width: 250px" prop="authors">
								<el-input v-model="form.authors"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<!--出版日期 chubandate-->
					<el-row>
						<el-col :span="8">
							<el-form-item label="出版日期" style="width: 300px" prop="chuBanDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.chuBanDate"
									value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>

							</el-form-item>
						</el-col>

						<!--总人数 people-->
						<el-col :span="8">
							<el-form-item label="总人数" style="width:200px" prop="zongRenShu">
								<el-input v-model.number="form.zongRenShu"></el-input>
							</el-form-item>
						</el-col>

						<!--本人排名 mesort-->
						<el-col :span="8">
							<el-form-item label="本人排名" style="width:200px" prop="meSort">
								<el-input v-model.number="form.meSort"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-form-item label="证明材料" style="width: 100%;">

						<el-upload  class="upload-demo" drag :action="filehead+'jiaocaizhuanzhu/upload'"
							style="width: 50%;" ref="upload" 
							:before-remove="beforeRemove" :on-success="uploadSuccess" :on-error="uploadError"
							:before-upload="beforeUpload" multiple :on-exceed="handleExceed" :file-list="fileList" >
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">大小不能超过10MB</div>
						</el-upload>
					</el-form-item>

					<el-form-item label="提交人" style="width: 200px" prop="createBy">
						<el-input v-model="form.createBy"></el-input>
					</el-form-item>

					<el-form-item label="备注">
						<el-input type="textarea" style="width: 500px;" v-model="form.memo"></el-input>
					</el-form-item>

					<!--  提交栏 -->
					<el-form-item>
						<el-button type="primary" @click="onsubmit('form')">添加信息</el-button>
						<!-- 								<el-button type="primary" @click="submitForm('form'),onsubmit()" >添加信息</el-button> -->
						<el-button @click="resetForm('form')">重置</el-button>
					</el-form-item>
				</el-form>
				<!-- </el-col> -->
			</el-row>




		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					
					readonly: true,
					form: {
						id: '',
						tianbaoId: '',
						tianbaoName: '',
						bookName: '',
						chuBanDate: '',
						chuBanSeh: '',
						createBy: '',
						createTime: '',
						authors: '',
						zongRenShu: '',
						meSort: '',
						memo: '',
						fileList: [],
						newFileName:[],
						oldFileName:[],
						
					},
					tableData:{
						recoreId:'',
						tijiaoId:'',
						tijiaoName:'',
						tijiaoTime:'',
						tijiaoMemo:'',					
					},
					recoreId: '',
					filehead:'',
					fileList: [],
					loading: false,
					lastuploadfile: '',
					fileMapprings: [],


					rules: {
						tianbaoName: [{
								required: true,
								message: '请输入填报人',
								trigger: 'blur'
							},
					, {
								min: 1,
								max: 20,
								message: '长度在 1 到 20 个字符',
								trigger: 'blur'
							}
						],
						chuBanSeh: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						authors: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						bookName: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						score: [{
								required: false
							},
							{
								type: 'number',
								message: '得分必须为数字值',
								trigger: 'blur'
							},
						],
						zongRenShu: [

							{
								required: true,
								type: 'number',
								message: '人数必须为数字值',
								trigger: 'blur'
							},
						],
						meSort: [{
							required: true,
							type: 'number',
							message: '排名必须为数字值',
							trigger: 'blur'
						}, ],
						createBy: [{
							 required: true,
								message: '请输入提交人',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 20,
								message: '长度在 1 到 20 个字符',
								trigger: 'blur'
							}
						],
						chuBanDate: [{
							type: 'string',
							required: true,
							message: '请选择日期',
							trigger: 'change'
						}],
						
					}

				},
				//生命周期函数
				created() {
					this.filehead = window.gsau
					this.findbyid()
					
				},
				methods: {
					findbyid: function() {
						axios.get(window.gsau + "jiaocaizhuanzhu/find").then((res) => {
							console.log(res)
							this.form.tianbaoName = res.data.data.map(item => item.nickName).toString()
							this.form.tianbaoId = res.data.data.map(item => item.id).toString()
						})
					},
					fanhui:function() {
						window.location="list.html"
					},

					//上传文件
					submitUpload() {
						this.$refs.upload.submit();
					},


					handleExceed(files, fileList) {
						console.log("handleExceed")
						this.$message.warning(
							`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
					},
					beforeUpload(file) {
						this.loading = true
						console.log("beforeUpload")
						//校验文件类型，文件大小
						console.log(file)
					},
					beforeRemove(file, fileList) {
						console.log("beforeRemove")
						//删除提交的表单表中要移除的文件
						let index = '';
						for (const i in fileList) {
							if (fileList[i] == file) {
								index = file.name;
								break;
							}
						}
						for (const i in this.fileMapprings) {
							if (this.fileMapprings[i].oldfilename == index) {
								index = this.fileMapprings[i].newfilename
								break;
							}
						}
						for (const i in this.form.fileList) {
							if (this.form.fileList[i] == index) {
								this.form.fileList.splice(i, 1)
								break;
							}
						}

					},
					uploadSuccess(response, file, fileList) {
						console.log(response)
						if (response.code == 200) {
							this.form.fileList.push(response.data.newfilename)
							this.lastuploadfile = response.data.newfilename
							let m = {
								oldfilename: '',
								newfilename: ''
							}
							m.newfilename = response.data.newfilename
							m.oldfilename = response.data.oldfilename
							this.form.newFileName.push(response.data.newfilename) 
							this.form.oldFileName.push(response.data.oldfilename) 
							this.fileMapprings.push(m)

							this.$message.success(file.name + "文件上传成功")

						} else {
							this.$message.error(response.data + "：上传失败，请重新上传");
							//删除上传列表中，失败的文件
							let index = 0;
							for (const i in fileList) {
								if (fileList[i] == file) {
									index = i;
									break;
								}
							}
							//移出当前文件对象
							fileList.splice(index, 1);
							this.$refs.uploadFile.clearFiles();
						}
						console.log(response.code)
						console.log(response)
						console.log(fileList)
						this.loading = false
					},
					uploadError(err, file, fileList) {
						console.log(err)
						console.log(file)
						console.log(fileList)

						this.$message.error(file.name + "上传失败，请重新上传");
						//删除上传列表中，失败的文件
						let index = 0;
						for (const i in fileList) {
							if (fileList[i] == file) {
								index = i;
								break;
							}
						}
						//移出当前文件对象
						fileList.splice(index, 1);
						this.$refs.uploadFile.clearFiles();
						this.loading = false
					},

					// 绑定提交信息按钮
					onsubmit(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								//用于获取提交时的时间:yyyy-MM-dd HH:mm:ss
								let currentdate = this.getCurrentTime()
								console.log(currentdate)
								// 出版时间在el-date-picker 中value-format="yyyy-MM-dd"
								console.log(this.form.chubandate)
								//用与提交的数据
								console.log(this.form)
								console.log(this.fileList)
								this.form.createTime = currentdate
								this.$confirm('是否提交?', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}).then(() => {
									axios.post(window.gsau+"jiaocaizhuanzhu/add", this.form).then((res) => {
										if (res.data.code === 10010) {
											console.log(this.form)
											this.$message.success("提交成功")
											this.$refs[formName].resetFields();
											this.findbyid()
											this.addShenhe(res.data.data.id,res.data.data.tianbaoName,res.data.data.createTime,res.data.data.tianbaoId,res.data.data.memo)
										} else {
											this.$message.error("提交失败")
										}
									})
								}).catch(() => {
									this.$message.info("取消提交")
								})
							} else {
								return false
							}
							
						})
					},
					addShenhe:function(id,tianbaoName,createTime,tianbaoId,memo){
						this.tableData.recoreId = id
						this.tableData.tijiaoName = tianbaoName
						this.tableData.tijiaoTime = createTime
						this.tableData.tijiaoId = tianbaoId
						this.tableData.tijiaoMemo = memo
						console.log(this.tableData)
						axios.post(window.gsau+"jiaocaizhuanzhu/addshenhe",this.tableData).then((res)=>{
							console.log(res)
						})
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
						this.findbyid()
					},


					// 日期函数格式为:yyyy-MM-dd HH:mm:ss	:2022-10-2 20:32:19
					getCurrentTime() {
						let currentTime = new Date(),
							year = currentTime.getFullYear(),
							month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime
							.getMonth() + 1,
							day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
						hour = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
						minutes = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime
							.getMinutes();
						second = currentTime.getSeconds() < 10 ? '0' + currentTime.getSeconds() : currentTime
						.getSeconds();
						currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + second
						return currentTime

					},
				},

			})
		</script>

	</body>


</html>
